<template>
  <div>
    <el-form inline>
      <el-form-item v-for="(each,index) in visibleList" :key="'alert_'+index">
        <el-alert type="warning" :title="'设备已离线 : ' + each.onlineTime" style="min-width: 280px;">
          {{ each.name || each.code }}</el-alert>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {
    today
  } from '@/views/components/utils';
  import deviceCalendarAPI from '@/api/device/calendar'
  const max_length = 4
  export default {
    name: 'DeviceCalendarOffline',
    data() {
      return {
        queryParams: {
          online: false,
          date: today(),
          code: null,
        },
        list: []
      }
    },
    created() {
      this.queryData()
    },
    computed: {
      visibleList() {
        const {
          list
        } = this
        const arr = []
        for (var i = 0; i < list.length && i < max_length; i++) {
          arr.push(list[i])
        }
        return arr
      }
    },
    methods: {
      queryData() {
        const vm = this
        deviceCalendarAPI.list(this.queryParams).then(res => {
          vm.list = [].concat(res.data)
        })
      }
    }
  }

</script>
